<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">

<head>
    <base href="<%=basePath %>">
    <meta charset="UTF-8">
    <title>帮助中心管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <!-- load css -->
    <link rel="icon" href="image/common/logo.png" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath %>css/font/iconfont.css?v=1.0.0" media="all">
    <link rel="stylesheet" type="text/css" href="<%=basePath %>js/layui/css/layui.css" media="all">
    <link href="<%=basePath %>js/common/ztree/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css"/>
    <link href="<%=basePath %>js/common/cropper/cropper.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="<%=basePath %>js/common/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="<%=basePath %>js/common/ztree/jquery.ztree.all.min.js"></script>
    <script type="text/javascript" src="<%=basePath %>js/layui/layui.js"></script>
    <script type="text/javascript" src="<%=basePath %>js/jQueryFileUpload/js/vendor/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="<%=basePath %>js/jQueryFileUpload/js/jquery.iframe-transport.js"></script>
    <script type="text/javascript" src="<%=basePath %>js/jQueryFileUpload/js/jquery.fileupload.js"></script>
    <script type="text/javascript" src="js/common/cropper/cropper.js"></script>
    <script type="text/javascript">
        /* 添加模板 */
        layui.use('layer', function () {
            var layer = layui.layer;
            var $ = layui.jquery;
        });
        var setting = {
            async: {
                enable: true, // 设置 zTree是否开启异步加载模式
                url: "${pageContext.request.contextPath}/fdfsHelp/querryHelpTree.do",//每次进行异步请求的URL地址
                autoParam: ["id"],//这个id就是当前的id
                type: "post",//提交方式
                dataFilter: filter//用来处理ajax返回的数据，也就是当前的url请求之后返回的数据
            },
            callback: {
                onClick: select//用来处理节点被点击之后执行的回调函数
            }
        };

        function filter(treeId, parentNode, childNodes) {//参数三:指的是传过来的节点信息
            setNode(childNodes);
            return childNodes;
        }

        //点击父节点展示字节点的方法
        function setNode(nodes) {
            if (!nodes) return null;
            for (var i = 0, l = nodes.length; i < l; i++) {
                nodes[i].url = "";
                setNode(nodes[i].children);
            }
        }

        $(document).ready(function () {
            //生成zTree树
            $.fn.zTree.init($("#goodsClass"), setting);
            //添加父级节点的时候需要早生成ztree树的时候进行
            $("#btnAddSub").unbind("click");
            $("#btnAddParent").on("click", function () {
                $.ajax({
                    method: "post",
                    url: "fdfsHelp/addFatherMethod.do",
                    success: function (data) {
                        //获取返回的状态码的信息
                        if (data.satausCode == 200) {
                            layer.msg(data.message, {icon: 6, time: 2000})//毫秒为单位
                            var model = data.object;
                            var treeObj = $.fn.zTree.getZTreeObj("goodsClass");
                            var newNode = {
                                name: model.help_name,
                                id: model.help_id,
                                pid: null,
                                url: "",
                                click: model.click
                            };
                            //进行添加节点
                            newNode = treeObj.addNodes(null, newNode);
                        } else {
                            layer.msg(data.message, {icon: 5, time: 2000})
                        }
                    }
                })
            })
        });

        // $("#btnAddSub").unbind("click");
        function select(event, treeId, treeNode) {//参数三就是当前的节点封装的对象这个对象里面的信息就是自己点击的时候传递的
            $("#btnAddSub").show();//展示添加节点的按钮
            $("#btnAddSub").unbind("click");
            $("#btnAddSub").attr("value", treeNode.id);
            $("#btnAddSub").on('click', function (data) {
                var dataid = $("#btnAddSub").attr("value") //点解获取指定标签指定属性的值
                $.ajax({
                    method: "post",
                    url: "fdfsHelp/addChildren.do",
                    data: {
                        id: dataid
                    },
                    success: function (data) {
                        if (data.satausCode == 200) {//查询返回的状态码
                            layer.msg(data.message, {icon: 6, time: 2000})//毫秒为单位
                            var model = data.object;//获取去到传送到前台页面，然后让ztree进行渲染
                            var treeObj = $.fn.zTree.getZTreeObj("goodsClass");//通过ztree的dom对象的id获取到ztree树的对象
                            var nodes = treeObj.getSelectedNodes();
                            var newNode = {
                                name: model.help_name,
                                id: model.help_id,
                                pid: nodes[0].gcId,
                                url: "",
                                click: model.click
                            };
                            //进行添加节点
                            newNode = treeObj.addNodes(nodes[0], newNode);
                        } else {
                            layer.msg(data.message, {icon: 5, time: 2000})
                        }
                    }
                })
            })
            /* 这个load函数就是，点击之后就会触发当前的事件，然后加载对应的路径，当前界面的js,css跳转后的界面也是可以使用的 */
            // $("#btnAddSub").attr("href", "goodsType/addSubClass.do?gcId="+treeNode.id+"&treeNodeLevel="+treeNode.level);//这个方法就是跳转到指定的属性值的地址
            $("#goodsClassDetails").load("${pageContext.request.contextPath}/fdfsHelp/toRightJsp.do?gcId=" + treeNode.id + "&treeNodeName=" + treeNode.name);//用来展示对应的信息的页面
            //+"&treeNodeLevel="+treeNode.level
        }
    </script>
</head>
<body>
<div style="margin-top:10px;">
    <div style="float: left; display: block; margin: 0px 10px; overflow: auto; width: 240px;
        height: 100%; border: solid 1px #CCC; background: #FFF;">
        <div class="layui-btn-group">
            <a id="btnAddParent" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe654;</i>添加根分类</a>
            <a style="display: none" id="btnAddSub" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe654;</i>添加子分类</a>
        </div>
        <div>
            <ul class="ztree" id="goodsClass">
            </ul>
        </div>
    </div>
    <div id="goodsClassDetails" style=" height: 100%;border: solid 1px #CCC; margin-left: 246px;">
    </div>
</div>
</body>
</html>